<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <Calculation/>
            </n-icon>
            <Handle id="ClassificationCalculation-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="ClassificationCalculation-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>分类计算</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="分类计算">
                <p>选择列： </p>
                <n-select
                    v-model:value="categorical_columns"
                    :options="props.data.data.title"
                    @update:value="popup.reopen"
                    placeholder="选择列"
                    label-field="title"
                    value-field="key"
                />
                <div class="column">
                    <p v-show="way !== 'count' && way !== 'no_repeat_count'">选择所需数据计算列: </p>
                    <div v-for="(index,item) in column" v-show="way !== 'count' && way !== 'no_repeat_count'">
                        <span>
                            <n-popconfirm
                                @click="popup.reopen"
                                @positive-click="handlePositiveClick(item)"
                                @negative-click="handleNegativeClick(item)"
                            >
                                <template #trigger>
                                        <span class="pointer">{{ item }}</span>
                                </template>
                                是否删除。
                            </n-popconfirm>
                        </span>
                        <n-select
                            v-model:value="index.key"
                            :options="props.data.data.title"
                            @update:value="popup.reopen"
                            placeholder="选择列"
                            label-field="title"
                            value-field="key"
                        />
                        <n-input placeholder="计算结果新列名" v-model:value="index.new_name"/>
                    </div>
                </div>
                <p>计算方式： </p>
                <n-select
                    v-model:value="way"
                    :options="symbolEnum"
                    @update:value="popup.reopen"
                    placeholder="选择列"
                />
                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="addColumn">添加分类计算</n-button>
                        <n-button @click="implementation">计算</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {Calculation} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        popup.show = false;
    },
    reopen: () => {
        popup.show = true
    }
})

const categorical_columns = ref(null)
// 条件
const way = ref("sum")
const symbolEnum = [
    {label: "求和", value: 'sum'},
    {label: "平均数", value: 'mean'},
    {label: "中位数", value: 'median'},
    {label: "最大值", value: 'max'},
    {label: "最小值", value: 'min'},
    {label: "对行进行计数", value: 'count'},
    {label: "非重复行计数", value: 'no_repeat_count'},
]

// 计算列
const column = ref([
    {key: null, new_name: ""},

])

function addColumn() {
    column.value.push(
        {key: null, new_name: ""}
    )
}

const handlePositiveClick = (item) => {
    popup.reopen();
    if (!item) {
        window.$message.warning("必须保留基础条件")
        return
    }
    column.value.splice(item, 1)
}
const handleNegativeClick = (item) => {
    console.log(item)
    popup.reopen()
}

function implementation() {
    workApi.post("perform_tasks/data_calculation", {
        data: props.data.data,
        operation: {
            categorical_columns: categorical_columns.value,
            column: column.value,
            way: way.value
        }
    }).then(r => {
        props.data.data = r.data
    })
}

const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}

</script>

<style scoped lang="less">
.n-card {
    width: 500px;

    .column {
        margin: 20px 0;

        > div {
            display: flex;

            > span {
                flex: 1;
                display: flex;
                align-items: center;
            }

            > div {
                flex: 10;
            }
        }
    }
}
</style>
